<template>
  <view class="Mall4j container">
    <!-- 头部菜单 -->
    <view class="order-tit">
      <text data-sts="0" :class="sts==0 ?  'on' : ''" @tap="onStsTap">未使用({{unUseCount}})</text>
      <text data-sts="1" :class="sts==1 ? 'on' : ''" @tap="onStsTap">已使用({{useCount}})</text>
    </view>
    <!-- 头部菜单 end -->

    <view class="main">
      <view class="h20_cf2">

      </view>
      <view class="cen_c" v-for="(item, index) in list" :key="index">
        <view class="box_5 flex-col" :class="{box_5_de : sts==1 }">
          <view class="section_2 ">
          </view>
          <view class="section_3 flex-row">
            <view class="group_3 flex-col">
              <text class="text_5 clamp_text"><text v-if="item.amount">￥</text>
                <text v-if="item.amount">{{ wxs.parsePrice(item.amount)[0] }}</text>
                <text v-if="item.amount">.{{ wxs.parsePrice(item.amount)[1] }}</text>
                <text v-if="item.amount && item.userScore" decode="true">&ensp;+&ensp;</text>
              </text>
              <text class="text_6 ">商品兑换卡</text>
              <view class="group_4 flex-col"></view>
            </view>
            <view class="text-group_2 flex-col">
              <text class="text_7 clamp_text">兑换专区通用</text>
              <text class="text_8 clamp_text">限该兑换专区内商品可用</text>
              <text class="text_9 clamp_text">{{ item.createTime }}</text>
            </view>
          </view>
          <view class="section_4 flex-col"></view>
          <view class="section_5 flex-col"></view>
          <view class="text_10" v-if="sts==1">
            已使用
          </view>
        </view>
      </view>

      <!-- 兑换卡列表 -->
      <!-- <block v-for="(item, index) in list" :key="index">
        <view class="prod-item">
          <view class="order-num">
            <text>获取时间：{{ item.createTime }}</text>
          </view>
          <block>
            <view>
              <view class="item-cont">
                <view class="prod-pic">
                  <image v-if="item.displayUrl" :src="item.displayUrl" />
                  <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
                </view>
                <view class="prod-info">
                  <view class="prodname">{{ item.name }}</view>
                  <view class="price-nums">
                    <text class="prodprice">
                      <text v-if="item.price" class="symbol">藏品单价￥</text>
                      <text v-if="item.price" class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text>
                      <text v-if="item.price" class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text>
                    </text>
                    <text class="prodcount">x1</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
          <view class="total-num">
            <view class="prodprice">兑换价值：<text v-if="item.amount" class="symbol">￥</text>
              <text v-if="item.amount" class="big-num">{{ wxs.parsePrice(item.amount)[0] }}</text>
              <text v-if="item.amount" class="small-num">.{{ wxs.parsePrice(item.amount)[1] }}</text>
              <text v-if="item.amount && item.userScore" class="small-num" decode="true">&ensp;+&ensp;</text>
            </view>
          </view>
        </view>
      </block> -->
      <!-- 兑换卡列表 end -->
    </view>
    <!-- 返回首页的悬浮按钮 -->
    <view class="home" @tap="HomePage()">
      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/order-home.png" />
    </view>
    <!-- 到底了~ -->
    <view v-if="loadAll && list.length !==0" class="loadall">{{ i18n.endTips }}</view>
    <!-- 空 -->
    <empty v-if="list.length == 0" />
    <invoiceEdit v-if="isShowInvoicePopup" :shop-id="invoiceShopId" :order-number="invoiceOrderNumber" @closePopup="closePopup" @getData="getOrderDataList" />
  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
<script>
const http = require("../../utils/http.js")
const config = require("../../utils/config.js")
const util = require("../../utils/util.js")
import { PayType, AppType } from "../../utils/constant.js"
import Pay from "../../utils/pay.js"
import empty from "../../components/empty-tips/index.vue"
import invoiceEdit from '../../components/invoice-edit/index.vue'

export default {
  data () {
    return {
      list: [],
      current: 1,
      size: 10,
      pages: 0,
      sts: 0,
      endTime: '',
      loadAll: false, // 已加载全部
      invoiceShopId: '',
      isShowInvoicePopup: false,
      invoiceOrderNumber: '',// 当前选择发票的id
      unUseCount: 0,
      useCount: 0
    }
  },

  components: {
    empty,
    invoiceEdit
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.sts) {
      this.setData({
        sts: options.sts
      });
    }
  },

  /**
  * 生命周期函数--监听页面显示
  */
  onShow: function () {
    // 加载导航标题
    uni.setNavigationBarTitle({
      title: "NFT兑换卡列表"
    });
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    this.loadOrderData(this.sts, 1);
    this.loadOrderDataCount();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.loadOrderData(this.sts, this.current + 1);
    } else {
      this.setData({
        loadAll: true
      })
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    // 关闭弹窗
    closePopup () {
      this.isShowInvoicePopup = false
    },
    getOrderDataList () {
      this.loadOrderData(this.sts, this.current)
    },

    /**
     * 加载订单数据
     */
    loadOrderData: function (sts, current) {
      var ths = this;
      var params = {
        url: "/p/userNftCoupon/getList",
        method: "GET",
        data: {
          current: current,
          size: this.size,
          status: sts
        },
        callBack: function (res) {
          var temp = [];
          res.records.forEach(orderItem => {
            orderItem.totalCounts = 0;
          });
          if (res.current == 1) {
            temp = res.records;
          } else {
            temp = ths.list;
            temp = ths.list.concat(res.records)
          }
          ths.list = temp
          ths.pages = res.pages
          ths.current = res.current
        }
      };
      http.request(params);
    },

    loadOrderDataCount: function () {
      var ths = this;
      var params = {
        url: "/p/userNftCoupon/getStatusCount",
        method: "GET",
        callBack: function (res) {
          ths.unUseCount = res.unUseCount;
          ths.useCount = res.useCount;
        },
      };
      http.request(params);
    },

    /**
     * 状态点击事件
     */
    onStsTap: function (e) {
      util.tapLog(3)
      var sts = e.currentTarget.dataset.sts;
      this.setData({
        sts: sts
      });
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.loadOrderData(sts, 1);
      this.setData({
        loadAll: false
      })
    },
    /**
     * 跳转首页
     */
    HomePage () {
      this.$Router.pushTab('/pages/index/index')
    }
  }
};
</script>
<style scoped lang='scss'>
@import "./coupon-list.css";
page {
  background-color: #fff;
  color: #333;
}
.order-tit {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-around;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  padding-bottom: 14rpx;
  text {
    display: block;
    font-size: 28rpx;
    color: 999;
    text-align: center;
  }
  .on {
    border-bottom: 4rpx solid #ff6d13;
  }
}
.main {
  padding-top: 100rpx;
  background-color: #fff;
  .h20_cf2 {
    height: 20rpx;
    background-color: #f2f2f2;
  }
}

.cen_c {
  display: flex;
  justify-content: center;
  margin: 26rpx 0;

  .box_5 {
    background-color: rgba(255, 233, 219, 1);
    border-radius: 15px;
    height: 193.6046511627907rpx;
    width: 680.2325581395348rpx;
    position: relative;
    .section_2 {
      position: absolute;
      width: 0rpx;
      height: 159rpx;
      z-index: 1;
      border-left: 2rpx #ff4916 dashed;
      left: 247rpx;
      top: 16rpx;
    }
    .section_3 {
      width: 605.2325581395348rpx;
      height: 115.11627906976744rpx;
      margin: 38.41860465116279rpx 0 29.372093023255815rpx 40.06976744186046rpx;
      .group_3 {
        width: 139.53488372093022rpx;
        height: 83.72093023255815rpx;
        margin-top: 12.209302325581396rpx;
        .text_5 {
          width: 200.32558139534883rpx;
          height: 47.093023255813954rpx;
          overflow-wrap: break-word;
          color: rgba(255, 73, 22, 1);
          font-size: 38.372093023255815rpx;
          font-family: Source Han Sans-Bold;
          font-weight: 700;
          text-align: left;
          white-space: nowrap;
          line-height: 38.372093023255815rpx;
          margin-left: 3.488372093023256rpx;
        }
        .text_6 {
          overflow-wrap: break-word;
          color: rgba(255, 73, 22, 1);
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: center;
          white-space: nowrap;
        }
        .group_4 {
          border-radius: 13px;
          width: 139.53488372093022rpx;
          height: 34.883720930232556rpx;
          border: 0.5px solid rgba(255, 73, 22, 1);
          margin-top: -33.13953488372093rpx;
        }
      }
      .text-group_2 {
        width: 268.6046511627907rpx;
        height: 115.11627906976744rpx;
        margin-left: 108.13953488372093rpx;
        .text_7 {
          width: 200.37209302325581rpx;
          height: 31.3953488372093rpx;
          overflow-wrap: break-word;
          color: rgba(255, 73, 22, 1);
          font-size: 31.3953488372093rpx;
          font-family: Source Han Sans-Medium;
          font-weight: 500;
          text-align: center;
          white-space: nowrap;
          line-height: 31.3953488372093rpx;
        }
        .text_8 {
          width: 300.6046511627907rpx;
          height: 24.41860465116279rpx;
          overflow-wrap: break-word;
          color: rgba(255, 73, 22, 1);
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 24.41860465116279rpx;
          margin-top: 20.930232558139537rpx;
        }
        .text_9 {
          width: 260.48837209302326rpx;
          height: 24.41860465116279rpx;
          overflow-wrap: break-word;
          color: rgba(255, 73, 22, 1);
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Normal;
          font-weight: NaN;
          text-align: center;
          white-space: nowrap;
          line-height: 24.41860465116279rpx;
          margin-top: 13.953488372093023rpx;
        }
      }
      .label_4 {
        width: 41.86046511627907rpx;
        height: 41.86046511627907rpx;
        margin: 36.627906976744185rpx 0 0 47.093023255813954rpx;
      }
    }
    .section_4 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 50%;
      position: absolute;
      left: 233.72093023255815rpx;
      top: -13.953488372093023rpx;
      width: 27.906976744186046rpx;
      height: 27.906976744186046rpx;
    }
    .section_5 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 50%;
      position: absolute;
      left: 233.72093023255815rpx;
      top: 179.65116279069767rpx;
      width: 27.906976744186046rpx;
      height: 27.906976744186046rpx;
    }
    .text_10 {
      font-weight: 600;
      font-size: 31rpx;
      color: #9c9c9c;
      position: absolute;
      right: 60rpx;
      width: 6rpx;
      line-height: 38rpx;
      top: 45rpx;
    }
  }
  .box_5_de {
    background-color: #f1f1f1;
    .section_2 {
      border-left: 2rpx #9c9c9c dashed;
    }
    .section_3 {
      .group_3 {
        .text_5 {
          color: #9c9c9c;
        }
        .text_6 {
          color: #9c9c9c;
        }
        .group_4 {
          border: 0.5px solid #9c9c9c;
        }
      }
      .text-group_2 {
        .text_7 {
          color: #9c9c9c;
        }
        .text_8 {
          color: #9c9c9c;
        }
        .text_9 {
          color: #9c9c9c;
        }
      }
    }
  }
}
</style>
